<template>
	<!-- 全真模拟-在线组卷【一键组卷，手动组卷】 -->
	<view id="create-paper">
		<view class="u-navbar-inner" @click="goback"><my-icon name="back" color="#363940"></my-icon></view>
		<view>
			<view class="title">
				<text>请选择试卷类型</text>
				<text>支持统一试卷和防作弊乱序乱题模式</text>
			</view>
			<view :class="['subject', subId === sub.val && 'active']" v-for="sub in subject[groupType]" :key="sub.name" @click="choseSub(sub.val)">
				<my-icon :name="sub.icon"></my-icon>
				<view class="info">
					<text class="name">{{ sub.name }}</text>
					<text v-show="sub.content" class="content">{{ sub.content }}</text>
				</view>
			</view>
		</view>
		<my-confirm ref="headBack" @cancel="backCancel()" @confirm="backSubmit()" confirm-text="确定" cancel-text="取消">
			<view class="subModal">
				<view class="subModalTit">选择防作弊方式</view>
				<u-checkbox-group class="radioLine" @change="radioGroupChange">
					<u-checkbox @change="radioChange" v-model="item.checked" v-for="(item, index) in radioList" :key="index" :name="item.name" :disabled="item.disabled">
						{{ item.name }}
					</u-checkbox>
				</u-checkbox-group>
				<view class="subModalwarn">注：请至少选择一种方式</view>
			</view>
		</my-confirm>
	</view>
</template>

<script>
export default {
	data() {
		return {
			groupType: 1, //试卷类型
			subId: '',
			subject: {
				'1': [
					{ name: '统一模式', content: '使用统一试卷，学生统一答题', icon: 'tongyimoshi_shijuanleixing', val: 1 },
					{ name: '防作弊模式', content: '打乱考试题目和顺序，试卷各不相同', icon: 'fangzuobimoshi_shijuanleixing', val: 2 }
				]
			},
			// 作弊类型
			radioTxt: [],
			radioList: [
				{
					name: '题目顺序不同',
					checked: false,
					disabled: false
				},
				{
					name: '题目选项不同',
					checked: false,
					disabled: false
				}
			]
		};
	},
	onLoad() {
		//1 一键组卷 2 手动组卷
	},
	methods: {
		// 弹窗显示
		choseSub(val) {
			this.subId = val;
			const sess = uni.getStorageSync('examStorage');
			if (val == 2) {
				// 作弊模式
				this.$nextTick(function() {
					this.$refs.headBack.open();
				});
			} else {
				//统一模式防作弊模式关闭
				sess.isquerandomorder = false;
				sess.isqueoprandomorder = false;
				uni.navigateTo({
					url: 'examSelectStudent?type=0'
				});
			}
			uni.setStorageSync('examStorage', sess);
		},
		radioChange(e) {
			// 防作弊方式
		},
		radioGroupChange(e) {
			// 类型文案
			this.radioTxt = e;
		},
		backSubmit() {
			const sess = uni.getStorageSync('examStorage');
			sess.isquerandomorder=this.radioList[0].checked;
			sess.isqueoprandomorder = this.radioList[1].checked;
			this.modalClose();
			setTimeout(() => {
				uni.navigateTo({
					url: 'examSelectStudent?type=0'
				});
			},500)	
			uni.setStorageSync('examStorage', sess);
		},
		//取消弹窗
		backCancel() {
			this.modalClose();
		},
		modalClose() {
			this.$nextTick(function() {
				this.$refs.headBack.close();
			});
		},
		goback(){
			// 返回
			uni.navigateBack({
				delta: 1
			});
		}
	}
};
</script>
<style>
page {
	overflow: hidden;
}
</style>
<style scoped lang="scss">
.u-navbar-inner{
	margin-top: 39upx;
	height: 80upx;
	line-height: 80upx;
	padding-left: 30upx;
	.iconfont{
		font-size: 34upx;
	}
}
.title {
	font-size: 38upx;
	font-weight: 500;
	color: #363940;
	text-align: center;
	margin-top: 137upx;
	margin-bottom: 109upx;
	text {
		display: block;
		line-height: 2;
	}
	text:last-child {
		font-size: 30upx;
		font-weight: 400;
		color: #6b7180;
	}
}
.radioLine {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: center;
	margin: 55upx auto 0;
	.u-checkbox {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-bottom: 20upx;
	}
}
.u-radio__icon-wrap--checked {
	border-radius: 10upx !important;
}
.subModalTit {
	font-size: 34upx;
	color: #363940;
}
.subModalwarn {
	color: #a6a6a6;
	font-size: 28upx;
}
.subject {
	display: flex;
	align-items: center;
	padding: 30upx 60upx;
	width: 650upx;
	height: 160upx;
	border-radius: 18upx;
	box-shadow: 0px 4upx 16upx 0px rgba(0, 0, 0, 0.1);
	margin: auto;
	margin-bottom: 40upx;
	image {
		margin-right: 40upx;
		width: 50upx;
		height: 50upx;
	}
	.iconfont {
		font-size: 50upx;
		color: transparent;
		margin-right: 35upx;
	}
	.icon-tongyimoshi_shijuanleixing {
		background: linear-gradient(to bottom, #ae9fff, #8f67ff);
		-webkit-background-clip: text;
	}
	.icon-fangzuobimoshi_shijuanleixing {
		background: linear-gradient(to bottom, #ffbe9a, #ff8b5e);
		-webkit-background-clip: text;
	}
	.info {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 100%;
		.name {
			font-size: 32upx;
			font-weight: 500;
			color: #363940;
		}
		.content {
			font-size: 26upx;
			font-weight: 400;
			color: #6b7180;
			margin-top: 16upx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			width: 440upx;
		}
	}
}
button {
	width: 350upx;
	background: $linear-bg;
	border-radius: 38px;
	font-size: 32upx;
	font-weight: 400;
	color: #ffffff;
	line-height: 76upx;
	margin-top: 50upx;
}
.active {
	background-color: #edeffb;
}
</style>
